<template>
  <div class="container">
    <div class="search-input">
      <el-input
        v-model="paramsForm.keywords"
        placeholder="请输入关键字(姓名/岗位)"
        style="width: 200px; margin-left: 10px"
      ></el-input>
      <el-input
        v-model="paramsForm.location"
        placeholder="请输入工作位置"
        style="width: 200px; margin-left: 10px"
      ></el-input>
      <el-select
        v-model="paramsForm.type"
        placeholder="求职类型"
        style="width: 120px; margin-left: 10px"
      >
        <el-option label="全职" :value="1"></el-option>
        <el-option label="兼职" :value="2"></el-option>
        <el-option label="实习生" :value="3"></el-option>
      </el-select>
      <!-- <el-select
        v-model="paramsForm.tag"
        placeholder="工作类型"
        style="width: 120px; margin-left: 10px"
      >
        <el-option label="互联网" :value="1"></el-option>
        <el-option label="金融" :value="2"></el-option>
        <el-option label="公务员" :value="3"></el-option>
      </el-select> -->
      <el-cascader
        v-model="paramsForm.tag"
        :options="options"
        :props="props"
        @change="handleChange"
        style="width: 120px; margin-left: 10px"
      />
      <el-select
        v-model="paramsForm.eduction"
        placeholder="教育程度"
        style="width: 120px; margin-left: 10px"
      >
        <el-option label="高中及以下" :value="1"></el-option>
        <el-option label="大专" :value="2"></el-option>
        <el-option label="本科" :value="3"></el-option>
        <el-option label="硕士" :value="2"></el-option>
        <el-option label="博士" :value="3"></el-option>
      </el-select>
      <el-select
        v-model="paramsForm.experience"
        placeholder="工作经验"
        style="width: 120px; margin-left: 10px"
      >
        <el-option label="应届生" :value="1"></el-option>
        <el-option label="实习生" :value="2"></el-option>
        <el-option label="一年以内" :value="3"></el-option>
        <el-option label="1-3年" :value="4"></el-option>
        <el-option label="3-5年" :value="5"></el-option>
        <el-option label="5-10年" :value="6"></el-option>
        <el-option label="10年以上" :value="7"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="search">
        搜索
      </el-button>
      <el-button type="warning" style="margin-left: 10px" @click="reset">
        重置
      </el-button>
      <el-button class="addJob" type="primary" @click="showAddJobDialog = true">
        添加职位
      </el-button>
      <el-button class="deleteSelected" type="danger" @click="deleteSelected">
        删除所选
      </el-button>
    </div>
    <div class="job-table">
      <el-table
        class="jobDataTable"
        :data="jobData"
        :border="false"
        @selection-change="handleSelectionChange"
        ref="multipleTableRef"
      >
        <el-table-column type="selection" width="35" />
        <el-table-column
          prop="id"
          label="职位ID"
          width="70px"
        ></el-table-column>
        <!-- <el-table-column prop="hrId" label="HRID" width="60px"></el-table-column> -->
        <el-table-column prop="name" label="职位名称"></el-table-column>
        <!-- <el-table-column prop="description" label="职业描述"></el-table-column> -->
        <el-table-column prop="location" label="工作地点"></el-table-column>
        <el-table-column prop="eduction" label="学历要求">
          <template v-slot="{ row }">
            <span>
              {{
                row.eduction === 1
                  ? '高中及以下'
                  : row.eduction === 2
                  ? '大专'
                  : row.eduction === 3
                  ? '本科'
                  : row.eduction === 4
                  ? '硕士'
                  : row.eduction === 5
                  ? '博士'
                  : ''
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="experience" label="经验要求">
          <template v-slot="{ row }">
            <span>
              {{
                row.experience === 1
                  ? '应届生'
                  : row.experience === 2
                  ? '实习生'
                  : row.experience === 3
                  ? '1年以内'
                  : row.experience === 4
                  ? '1-3年'
                  : row.experience === 5
                  ? '3-5年'
                  : row.experience === 6
                  ? '5-10年'
                  : row.experience === 7
                  ? '10年以上'
                  : ''
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="求职类型">
          <template v-slot="{ row }">
            <span>
              {{
                row.type === 1
                  ? '全职'
                  : row.type === 2
                  ? '兼职'
                  : row.type === 3
                  ? '实习生'
                  : ''
              }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="tag" label="职业标签">
          <template v-slot="{ row }">
            <span>
              {{
                row.type === 1
                  ? '互联网'
                  : row.type === 2
                  ? '金融'
                  : row.type === 3
                  ? '公务员'
                  : ''
              }}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="tagName" label="职业标签"></el-table-column>
        <el-table-column prop="tag" label="职业标签id"></el-table-column>
        <el-table-column prop="otherTag" label="自定义标签"></el-table-column>
        <el-table-column
          prop="minSalary"
          label="最低薪资（K）"
        ></el-table-column>
        <el-table-column
          prop="maxSalary"
          label="最高薪资（K）"
        ></el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-slot="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'info'">
              {{ row.status === 1 ? '招聘中' : '已招聘' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template #default="props">
            <div class="work-description">
              <h4>工作描述：</h4>
              <textarea
                class="text-area"
                v-model="props.row.description"
              ></textarea>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100px">
          <template v-slot="{ row }">
            <div class="button">
              <el-button
                size="small"
                @click="openUpdateDialog(row)"
                type="primary"
              >
                更新
              </el-button>
              <el-button size="small" @click="deleteJob(row)" type="danger">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paramsForm.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="paramsForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog v-model="showUpdateJobDialog" title="更新职位详情" width="800">
      <el-form :model="updateJobForm" label-width="100px">
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="职位名称" prop="name">
              <el-input v-model="updateJobForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="工作地点" prop="location">
              <el-input v-model="updateJobForm.location"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="学历要求" prop="eduction">
          <el-radio-group v-model="updateJobForm.eduction">
            <el-radio :label="1">高中及以下</el-radio>
            <el-radio :label="2">大专</el-radio>
            <el-radio :label="3">本科</el-radio>
            <el-radio :label="4">硕士</el-radio>
            <el-radio :label="5">博士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="经验要求" prop="experience">
              <el-select
                v-model="updateJobForm.experience"
                placeholder="请选择"
              >
                <el-option label="应届生" :value="1"></el-option>
                <el-option label="实习生" :value="2"></el-option>
                <el-option label="1年以内" :value="3"></el-option>
                <el-option label="1-3年" :value="4"></el-option>
                <el-option label="3-5年" :value="5"></el-option>
                <el-option label="5-10年" :value="6"></el-option>
                <el-option label="10年以上" :value="7"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="updateJobForm.status">
                <el-radio :label="1">招聘中</el-radio>
                <el-radio :label="2">已招聘</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="求职类型" prop="type">
          <el-radio-group v-model="updateJobForm.type">
            <el-radio :label="1">全职</el-radio>
            <el-radio :label="2">兼职</el-radio>
            <el-radio :label="3">实习生</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="职业标签" prop="tag">
              <el-cascader
                v-model="updateJobForm.tag"
                :options="options"
                :props="props"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="自定义标签" prop="otherTag">
              <el-input v-model="updateJobForm.otherTag"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="最低薪资" prop="minSalary">
              <el-input-number
                v-model="updateJobForm.minSalary"
                :controls="true"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="最高薪资" prop="maxSalary">
              <el-input-number
                v-model="updateJobForm.maxSalary"
                :controls="true"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="职业描述" prop="description">
          <el-input
            type="textarea"
            v-model="updateJobForm.description"
            style="width: 570px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="large"
            type="primary"
            @click="updateSubmit"
            style="margin-left: 475px"
          >
            提交更新
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="showAddJobDialog" title="添加职位" width="800">
      <el-form :model="addJobForm" label-width="100px">
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="职位名称" prop="name">
              <el-input v-model="addJobForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="工作地点" prop="location">
              <el-input v-model="addJobForm.location"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="学历要求" prop="eduction">
          <el-radio-group v-model="addJobForm.eduction">
            <el-radio :label="1">高中及以下</el-radio>
            <el-radio :label="2">大专</el-radio>
            <el-radio :label="3">本科</el-radio>
            <el-radio :label="4">硕士</el-radio>
            <el-radio :label="5">博士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="经验要求" prop="experience">
              <el-select v-model="addJobForm.experience" placeholder="请选择">
                <el-option label="应届生" :value="1"></el-option>
                <el-option label="实习生" :value="2"></el-option>
                <el-option label="1年以内" :value="3"></el-option>
                <el-option label="1-3年" :value="4"></el-option>
                <el-option label="3-5年" :value="5"></el-option>
                <el-option label="5-10年" :value="6"></el-option>
                <el-option label="10年以上" :value="7"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="addJobForm.status">
                <el-radio :label="1">招聘中</el-radio>
                <el-radio :label="2">已招聘</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="求职类型" prop="type">
          <el-radio-group v-model="addJobForm.type">
            <el-radio :label="1">全职</el-radio>
            <el-radio :label="2">兼职</el-radio>
            <el-radio :label="3">实习生</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="职业标签" prop="tag">
              <!-- <el-select v-model="addJobForm.tag" placeholder="请选择">
                <el-option label="互联网" :value="1"></el-option>
                <el-option label="金融" :value="2"></el-option>
                <el-option label="公务员" :value="3"></el-option>
              </el-select> -->
              <el-cascader
                v-model="addJobForm.tag"
                :options="options"
                :props="props"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="自定义标签" prop="otherTag">
              <el-input v-model="addJobForm.otherTag"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="最低薪资" prop="minSalary">
              <el-input-number
                v-model="addJobForm.minSalary"
                :controls="true"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="1"></el-col>
          <el-col :span="10">
            <el-form-item label="最高薪资" prop="maxSalary">
              <el-input-number
                v-model="addJobForm.maxSalary"
                :controls="true"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="职业描述" prop="description">
          <el-input
            type="textarea"
            v-model="addJobForm.description"
            style="width: 570px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="large"
            type="primary"
            @click="addSubmit"
            style="margin-left: 475px"
          >
            确认添加
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElTable } from 'element-plus'
import {
  getJobHrMore,
  postJobOne,
  putJobOne,
  deleteJobOneById,
  getHrMe,
  getTagGetAll,
} from '@/servers/controller'

interface Job {
  id: number
  hrId: number
  name: string
  description: string
  location: string
  eduction: number
  experience: number
  type: number
  tag: number
  otherTag: string
  minSalary: number
  maxSalary: number
  status: number
  createTime: string
}

const updateJobForm = ref({
  id: undefined,
  hrId: undefined,
  name: '',
  description: '',
  location: '',
  eduction: 1,
  experience: 1,
  type: 1,
  tag: 1,
  otherTag: '',
  minSalary: 1,
  maxSalary: 1,
  status: 1,
})

const addJobForm = reactive({
  hrId: 0,
  name: '',
  description: '',
  location: '',
  eduction: 1,
  experience: 1,
  type: 1,
  tag: 1,
  otherTag: '',
  minSalary: 1,
  maxSalary: 1,
  status: 1,
})

const paramsForm = reactive({
  pageSize: 10,
  pageNum: 1,
  keywords: '',
  location: '',
  type: undefined,
  tag: undefined,
  eduction: undefined,
  experience: undefined,
})

const hrId = ref(0)
const showUpdateJobDialog = ref(false)
const showAddJobDialog = ref(false)
const total = ref(10)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<Job[]>([])

onMounted(() => {
  getHrInfor()
  loadData()
  getAllTag()
})

const loadData = async () => {
  if (paramsForm.tag != undefined) {
    // @ts-ignore
    const lastNumber = paramsForm.tag[paramsForm.tag.length - 1]
    paramsForm.tag = lastNumber
  }
  console.log('paramsForm:', paramsForm)
  // @ts-ignore
  const res = await getJobHrMore({ jobPageQuery: paramsForm })
  if (res.data.code === 200) {
    // @ts-ignore
    jobData.value = res.data.data.list
    total.value = res.data.data.total
  } else {
    ElMessage.error('获取失败')
  }
}

//获取标签//////////////////////////////
const options = ref([])
const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true, //只显示最后一个
}

const getAllTag = async () => {
  let storageTag = sessionStorage.getItem('allTag')
  if (storageTag != null) {
    options.value = JSON.parse(storageTag)
    return
  }
  try {
    //@ts-ignore
    const { data } = await getAllTag()
    sessionStorage.setItem('allTag', JSON.stringify(data.data))
    options.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  }
}

const handleChange = (value: any) => {
  console.log(value)
}
//////////////////////////////////////////

const toggleSelection = (rows?: Job[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

const handleSelectionChange = (val: Job[]) => {
  multipleSelection.value = val
}

const openUpdateDialog = (row: any) => {
  showUpdateJobDialog.value = true
  console.log('当前职位的标签id:', row.tag)
  console.log('当前职位的标签名称:', row.tagName)
  updateJobForm.value = { ...row }
  console.log('updateJobForm:', updateJobForm.value)
}

const deleteJob = async (row: any) => {
  const res = await deleteJobOneById({ id: row.id })
  loadData()
}

const deleteSelected = () => {
  if (multipleTableRef.value != null) {
    let tableData = multipleTableRef.value.getSelectionRows()
    for (let row of tableData) {
      deleteJob(row)
    }
  }
  console.log('删除失败')
}

const handleSizeChange = (val: number) => {
  paramsForm.pageSize = val
}

const handleCurrentChange = (val: number) => {
  paramsForm.pageNum = val
}

const updateSubmit = async () => {
  console.log('updateForm 的值：', updateJobForm.value)
  // const updateJobForm1 = {
  //   id: updateJobForm.value.id,
  //   hrId: hrId.value,
  //   name: updateJobForm.value.name,
  //   description: updateJobForm.value.description,
  //   location: updateJobForm.value.location,
  //   eduction: updateJobForm.value.eduction,
  //   experience: updateJobForm.value.experience,
  //   type: updateJobForm.value.type,
  //   tag: updateJobForm.value.tag,
  //   otherTag: updateJobForm.value.otherTag,
  //   minSalary: updateJobForm.value.minSalary,
  //   maxSalary: updateJobForm.value.maxSalary,
  //   status: updateJobForm.value.status,
  // }
  // console.log("updateForm1 的值未处理tag：",updateJobForm1)
  // @ts-ignore
  if (
    Array.isArray(updateJobForm.value.tag) &&
    updateJobForm.value.tag.length > 0
  ) {
    // @ts-ignore
    const tagList: [] = updateJobForm.value.tag
    const tagNumber = tagList[tagList.length - 1]
    updateJobForm.value.tag = tagNumber
  }
  if (
    Array.isArray(updateJobForm.value.otherTag) &&
    updateJobForm.value.otherTag.length > 0
  ) {
    const firstData = updateJobForm.value.otherTag[0]
    // @ts-ignore
    updateJobForm.value.otherTag = firstData
  }
  // console.log("updateForm1 的值处理tag：",updateJobForm1)
  //@ts-ignore
  updateJobForm.value.hrId = hrId.value
  //@ts-ignore
  const res = await putJobOne(updateJobForm.value)
  // const res = await putJobOne(updateJobForm1)
  if (res.data.code === 200) {
    showUpdateJobDialog.value = false
    loadData()
  } else {
    ElMessage.error('更新失败')
  }
}

const getHrInfor = async () => {
  const res = await getHrMe()
  if (res.data.code === 200) {
    console.log('获取hr信息成功')
    hrId.value = res.data.data.id
  } else {
    ElMessage.error('获取hr信息失败')
  }
}

const addSubmit = async () => {
  // @ts-ignore
  addJobForm.hrId = hrId.value
  // @ts-ignore
  console.log('tag:', addJobForm.tag)
  // @ts-ignore
  const lastNumber = addJobForm.tag[addJobForm.tag.length - 1]
  addJobForm.tag = lastNumber
  const res = await postJobOne(addJobForm)
  if (res.data.code === 200) {
    showAddJobDialog.value = false
    loadData()
  } else {
    ElMessage.error('添加失败')
  }
}

const search = () => {
  loadData()
}

const reset = () => {
  paramsForm.keywords = ''
  paramsForm.location = ''
  paramsForm.type = undefined
  paramsForm.tag = undefined
  paramsForm.eduction = undefined
  paramsForm.experience = undefined
  loadData()
}

const jobData = ref([
  {
    id: 1,
    hrId: 101,
    name: '前端工程师',
    description: '负责开发和维护公司网站的前端部分。',
    location: '北京',
    eduction: 3,
    experience: 3,
    type: 1,
    tag: 1,
    tagName: 'java',
    otherTag: '前端开发',
    minSalary: 10,
    maxSalary: 15,
    status: 1,
    createTime: '2024-03-28 09:30:00',
  },
  {
    id: 2,
    hrId: 102,
    name: '后端工程师',
    description: '负责开发和维护公司网站的后端部分。',
    location: '上海',
    eduction: 4,
    experience: 4,
    type: 1,
    tag: 1,
    tagName: 'java',
    otherTag: '后端开发',
    minSalary: 12,
    maxSalary: 18,
    status: 1,
    createTime: '2024-03-29 10:45:00',
  },
])
</script>

<style scoped lang="scss">
.container {
  overflow: auto;
  max-height: 700px; /* 设置最大高度，超出时将显示滚动条 */
}

.job-table {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jobDataTable {
  width: 90%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button {
  display: flex;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}

.search-input {
  display: flex;
  margin-left: 80px;
  margin-top: 20px;
}

.deleteSelected {
  margin-left: 10px;
}

.addJob {
  margin-left: 110px;
}

.work-description {
  width: 70%;
  height: 280px;
  margin-left: 15%;
  margin-top: 10px;
}

.text-area {
  width: 100%;
  height: 90%;
  resize: none;
}
</style>
